<template>
	<div class="addinfo_box">
		<UserName :username="username"></UserName>
		<div class="addaccount_box">
			<div class="addaccount">
				<p class="date">
					记账日期：
					<input ref='date' type="date" name='date' placeholder="2018/12/23">
				</p>
				<!-- <hr> -->
				<p class="date">
					早餐花费：
					<input ref='morning' type="text" name='morning' placeholder="10元">
				</p>
				<!-- <hr> -->
				<p class="date">
					午餐花费：
					<input ref='afternoon' type="text" name='afternoon' placeholder="10元">
				</p>
				<!-- <hr> -->
				<p class="date">
					晚餐花费：
					<input ref='evening' type="text" name='evening' placeholder="10元">
				</p>
				<!-- <hr> -->
				<p class="other">
					<span>
						其他花费：
					</span>
					<textarea ref="other" name="other" placeholder="请用一段话总结">
						
					</textarea>
				</p>
				<!-- <hr> -->
				<p class="btn">
					<input type="button" :value="value" @click="account">
				</p>
			</div>
		</div>
	</div>
</template>


<script type="text/javascript">
// eslint-disable-next-line
/* eslint-disable */
import UserName from "../components/username.vue"
import { MessageBox } from 'mint-ui'
export default {
	name: 'addinfo',
	components: {
		UserName,
	},
	props: {
		// true表示添加
		// false表示编辑
		showValue: {
			type: Boolean,
			default: true,
		},
		username: {
			type: String,
			default: !localStorage.getItem('username') ? 'Ken' : localStorage.getItem('username')
		}
	},
	data() {
		return {
			value: this.showValue?"添加":"修改",
			date: '',
			morning: '',
			afternoon: '',
			evening: '',
			other: ''
		}
	},
	methods: {
		account() {
			this.date = this.$refs.date.value
			this.morning = this.$refs.morning.value
			this.afternoon = this.$refs.afternoon.value
			this.evening = this.$refs.evening.value
			this.other = this.$refs.other.value
			var morning = this.padText(this.morning)
			var afternoon = this.padText(this.afternoon)
			var evening = this.padText(this.evening)
			this.$emit("account",this.date,morning,afternoon,evening,this.other);
		},
		padText(value){
			value = parseFloat(value)
			return value += "元"
		}
	},
	filters: {
		date(value){
			
		},
		morningFilter(value){
			this.padText(value)
		},
		afternoonFilter(value){
			this.padText(value)
		},
		eveningFilter(value){
			this.padText(value)
		},
		other(value){
		}
	},
}
</script>
<style lang="scss" scoped>
@import "../../public/sass/var.scss";
.addinfo_box{
	.addaccount_box{
		background-color: $accountcolor;
		.addaccount{
			text-align: left;
			padding: 10px;
			color: $familycolor;
			p{
				margin: 12.5% 0 13.5% 0;
			}
			.date{
				height: 30px;
				line-height: 30px;
				input{
					width: 80%;
					padding: 0 50px 0 10px;
					height: 100%;
					outline: none;
					border: none;
					box-sizing: border-box;
					// text-indent: 20px;
					color: $accountcolor;
				}
			}
			.other{
				span{
					text-align: left;
					vertical-align: middle;
				}
				textarea{
					width: 80%;
					height: 100px;
					padding: 0 10px 0 10px;
					vertical-align: middle;
					box-sizing: border-box;
					outline: none;
					border: none;
					resize: none;
				}
			}
			.btn{
				text-align: center;
				input[type='button']{

					padding: 5px 30px 5px 30px;
					outline: none;
					border: none;
					background-color: $btnbackgroundcolor;
					color: $familycolor;
				}
			}
		}
	}
}

</style>